/*
 * @Description:
 * @Author: dh
 * @Date: 2022-01-24 14:00:39
 * @LastEditors: dh
 * @LastEditTime: 2022-04-13 13:42:42
 */

// .on()   给元素绑定事件、(可以绑定多个)  参数：1.type 2.el 3.传递给target的数据 4.cb  (2、3 可以省略)
$('ul>li').on('click', fun)

$('ul').on('click', 'li', fun)

$('ul').on('click', 'li', { name: 'abc' }, function (e) {
	console.log(e.data) // Object {name: "abc"}
})

// 同时注册绑定多个事件处理函数
$('p').on({
	click: function () {},
	mouseenter: function () {},
	mouseleave: function () {},
})

// .one()   绑定一次性的事件。
$('ul').one('click', 'li', fun)
// Demo  让a标签第一次点击跳转到淘宝，再点击跳转到百度、
// <a href="https://baidu.com" target="_blank">百度一下</a>
$('a').one('click', function () {
	open('https://taobao.com')
	return false // 可以阻止默认事件以及冒泡、
})

// .off()   销毁绑定的事件、(如不填参数将销毁所有的绑定)
$('ul>li').off('click', fun)

$('ul').off('click', 'li')

// 同时销毁多个事件处理函数、
$('p').off({
	click: fun_1,
	mouseenter: fun_2,
	mouseleave: fun_3,
})

// .trigger()  主动触发一个元素事件(可触发自定义事件)、参数：1.type 2.dataArr
$('ul').find('li').trigger('click', [1, 2, 3]) // 参数2 可以传递一个数组作为实参、

// .hover()    鼠标移入(mouseenter)、移出(mouseleave)事件简写的方式、
$('').hover(
	function () {
		console.log('鼠标移入·事件')
	},
	function () {
		console.log('鼠标移出·事件')
	}
)

// 其他直接使用的方法(事件)
// .click .keydown .mouseenter .mouseleave 、、
// 兼容的事件对象
// e.pageX e.clienX e.which e.button
// e.preventDefault()
// e.stopPropagation()
// return false;  兼容阻止事件冒泡和默认事件、
